<template>
  <div class="all">
    <!-- 头部购物车导航 -->
    <van-nav-bar
      title="购物车"
    />
    <div v-if="isLogin && cartList.length > 0">
      <!-- 统计与编辑 -->
      <div class="part_one">
            <div class="count">
              共<span>{{ goodsNum }}</span>件商品
            </div>
            <div class="edit" @click="beginEdit">
              <div v-if="!isEdit"><van-icon name="edit" />编辑</div>
              <div v-else><van-icon name="edit" />取消</div>
            </div>
          </div>
          <!-- 购物车内的商品 -->
          <base-goods-cart v-for="item in cartList" :key="item.goods_id" :item="item"></base-goods-cart>
          <!-- 底部固定结算栏 -->
          <div class="footer">
            <div class="left">
              <van-checkbox :value="isAllChecked" @click="handelChecked"></van-checkbox>全选
            </div>
            <div class="right">
              <p>合计:￥<span style="color:red">{{ selGoodsPrice }}</span></p>
              <button v-if="!isEdit" :class="{ active:selGoodsNum > 0 ? true : false }" @click="goPay">结算({{ selGoodsNum }})</button>
              <button v-else :class="{ active: selGoodsNum > 0 ? true : false}" @click="delGoods">删除({{ selGoodsNum }})</button>
            </div>
          </div>
    </div>
    <div v-else>
      <h2>购物车为空</h2>
      <button @click="$router.push('/')">去逛逛</button>
    </div>
  </div>
</template>

<script>
import BaseGoodsCart from '@/components/BaseGoodsCart.vue'
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'ShoppingCartIndex',
  data () {
    return {
      isEdit: false // 是否处于编辑状态
    }
  },
  methods: {
    // 控制商品全选/全不选
    handelChecked () {
      this.$store.commit('cart/allGoodsSelected', !this.isAllChecked)
    },
    // 控制修改时商品全不选，取消时商品全选
    beginEdit () {
      this.isEdit = !this.isEdit
      this.$store.commit('cart/allGoodsSelected', !this.isEdit)
    },
    // 删除购物车商品
    delGoods () {
      this.$store.dispatch('cart/delGoods')
      this.isEdit = false
    },
    // 去往结算页面
    goPay () {
      this.$router.push({
        path: '/pay',
        query: {
          mode: 'cart',
          cartIds: this.cartList.map(item => item.id).join(',')
        }
      })
    }
  },
  computed: {
    ...mapState('cart', ['cartList', 'cartNum']),
    ...mapGetters('cart', ['goodsNum', 'selectedGoods', 'selGoodsNum', 'selGoodsPrice', 'isAllChecked']),
    isLogin () {
      return this.$store.getters.isLogin
    }
  },
  components: {
    BaseGoodsCart
  },
  created () {
    // 用户未登录，则跳转到登录页
    // if (!this.$store.getters.isLogin) {
    //   this.$router.push('/login')
    //   return
    // }
    this.$store.dispatch('cart/getCartAction')
  }
}
</script>

<style scoped>
.all {
  background:rgb(210, 203, 203);
  height:580px;
  overflow:scroll;
}
/* 统计与编辑 */
.part_one {
  display:flex;
  justify-content:space-between;
  padding:10px 10px 0 10px;
}
.part_one .count span {
  color:red;
}
/* 底部固定结算栏 */
.footer {
  width:100%;
  padding:10px;
  height:37px;
  position:fixed;
  bottom:50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.footer .left {
  display: flex;
  align-items:center;
}
.footer .right {
  display:flex;
  align-items:center;
}
.footer .right button {
  width:100px;
  height:30px;
  color:white;
  border:none;
  border-radius:50px;
  margin-left:10px;
}

.footer .right button.active {
  background:orange;
}
</style>
